<template>
  <div class="home2">
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      style="margin-top: 15vw"
    >
      <van-swipe-item v-for="(item, index) in imglist" :key="index"
        ><img :src="item.blurPicUrl" alt="" width="100%" height="100%"
      /></van-swipe-item>
    </van-swipe>
    <scrollx :item="navs"></scrollx>
    <van-divider />
    <leave>
      <template #left><div>独家放送</div></template>
    </leave>
    <scrollx :items="navss" imgwidth="100" :algin="true"></scrollx>
    <van-divider />
    <leave>
      <template #left><div>每日推荐</div></template>
    </leave>
    <newscroll :tj="tj"></newscroll>
  </div>
</template>

<script>
import navbar from "../components/navbar.vue";
import footers from "../components/footers.vue";
import leave from "../components/leave.vue";
import scrollx from "../components/scrollx.vue";
import newscroll from "../components/newscroll.vue";
import {
  newest,
  resource,
  songs,
  personalized,
  privatecontent,
  recommend,

} from "../api/music/music";
import { status } from "../api/login/login";

export default {
  components: { navbar, footers, leave, scrollx, newscroll },
  data() {
    return {
      loading: true,
      imglist: [0, 1, 2, 3, 4],
      navs: [
        { text: "每日推荐1", imgs: require("../assets/img/222.webp") },
        { text: "每日推荐2", imgs: require("../assets/img/222.webp") },
        { text: "每日推荐3", imgs: require("../assets/img/222.webp") },
        { text: "每日推荐4", imgs: require("../assets/img/222.webp") },
        { text: "每日推荐5", imgs: require("../assets/img/222.webp") },
        { text: "每日推荐", imgs: require("../assets/img/222.webp") },
        { text: "每日推荐", imgs: require("../assets/img/222.webp") },
      ],
      navss: [
        {
          text: "每日推荐每日推荐每日推荐每日推荐每日推荐每日推荐",
          imgs: require("../assets/img/IMG_2122.png"),
        },
        { text: "每日推荐1", imgs: require("../assets/img/IMG_2122.png") },
        { text: "每日推荐1", imgs: require("../assets/img/IMG_2122.png") },
        { text: "每日推荐1", imgs: require("../assets/img/IMG_2122.png") },
        { text: "每日推荐1", imgs: require("../assets/img/IMG_2122.png") },
        { text: "每日推荐1", imgs: require("../assets/img/IMG_2122.png") },
        { text: "每日推荐1", imgs: require("../assets/img/IMG_2122.png") },
        { text: "每日推荐1", imgs: require("../assets/img/IMG_2122.png") },
        { text: "每日推荐1", imgs: require("../assets/img/IMG_2122.png") },
        { text: "每日推荐1", imgs: require("../assets/img/IMG_2122.png") },
        { text: "每日推荐1", imgs: require("../assets/img/IMG_2122.png") },
      ],
      tj: [],
      w: "",
      time: "",
    };
  },
  mounted() {
    
    this.$nextTick(function () {
      // recommend()
      this.imglists();
      status().then((v) => {
        this.resources();
        this.songss();
      });
    });
  },
  methods: {
    // 首页轮播图
    imglists() {
      newest().then((v) => {
        this.imglist = v.albums;
      });
    },
    // 每日推荐歌单
    resources() {
      privatecontent({ limit: 20 }).then((v) => {
        this.navss = v.result;
      });
    },
    // 每日推荐歌曲
    songss() {
      personalized({ limit: 30 }).then((v) => {
        let lists = [];
        let newlists = [];
        lists = v.result;
        lists.forEach((v, index, arr) => {
          if (index % 3 == 0) {
            newlists.push(arr.slice(index, index + 3));
          }
        });
        this.tj = newlists;
      });
      // songs().then((v) => {

      // });
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.home2 {
  width: 100%;
  overflow: hidden;
  height: 1000px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 50vw;
  text-align: center;
  height: 50vw;
  background-color: #39a9ed;
}
// .wrapper {
//   display: inline-block;
//   width: 100%;
//   height: 20vw;
//   white-space: nowrap;
//   .content {
//     display: inline-block;
//     li {
//       display: inline-block;
//       padding: 3vw 2vw;
//       text-align: center;
//     }
//   }
// }
// .navs {
//   display: flex;
//   height: auto;
//   width: 400vw;
//   overflow-x: scroll;
// }
</style>